<template>
  <view class="overdue-container">
    <!-- 顶部导航栏 -->
    <nav-bar title="待付账单" :showSearch="true" @search="showSearch"></nav-bar>
    
    <!-- 筛选条件区域 -->
    <filter-bar
      departmentText="部门"
      statusText="账单类型"
      filterText="筛选"
      @filter="handleFilter"
    ></filter-bar>
    
    <!-- 账单列表 -->
    <scroll-view scroll-y class="bill-list" @scrolltolower="loadMore">
      <view class="bill-item" v-for="(item, index) in billList" :key="index">
        <view class="bill-content">
          <view class="bill-info">
            <view class="bill-title">{{item.title}}</view>
            <view class="bill-detail">
              <text class="date">{{item.date}}</text>
              <text class="tenant">| {{item.tenant}}</text>
            </view>
            <view class="bill-status">
              <text class="days-overdue">逾期{{item.overdueDays}}天</text>
            </view>
          </view>
          <view class="bill-amount">
            <text class="amount">¥{{item.amount}}</text>
            <text class="status">{{item.status}}</text>
          </view>
        </view>
      </view>
      
      <!-- 加载更多 -->
      <view class="loading" v-if="isLoading">
        <text>加载中...</text>
      </view>
      <view class="no-more" v-if="noMore">
        <text>没有更多数据了</text>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import NavBar from '@/components/nav-bar/index.vue';
import FilterBar from '@/components/filter-bar/index.vue';
import { getPayableBillList } from '@/api/overdue.js';
import { formatDate, formatAmount } from '@/utils/index.js';

export default {
  components: {
    NavBar,
    FilterBar
  },
  data() {
    return {
      billList: [],
      isLoading: false,
      noMore: false,
      page: 1,
      pageSize: 10,
      currentFilters: {}
    }
  },
  onLoad() {
    this.loadBillList();
  },
  methods: {
    showSearch() {
      uni.navigateTo({
        url: '/pages/overdue/search'
      });
    },
    handleFilter(params) {
      console.log('Filter params:', params);
      
      // 更新筛选参数
      this.currentFilters = {};
      
      if (params.department) {
        this.currentFilters.department = params.department;
      }
      
      if (params.billType) {
        this.currentFilters.billType = params.billType;
      }
      
      if (params.filter && params.filter.length) {
        params.filter.forEach(item => {
          if (item.type === 'overdueDays') {
            this.currentFilters.overdueDays = item.value;
          } else if (item.type === 'amountRange') {
            this.currentFilters.amountRange = item.value;
          }
        });
      }
      
      // 重置分页并加载数据
      this.page = 1;
      this.billList = [];
      this.loadBillList();
    },
    async loadBillList() {
      if (this.isLoading) return;
      this.isLoading = true;
      
      try {
        // 构建请求参数
        const params = {
          page: this.page,
          pageSize: this.pageSize,
          // 添加筛选参数
          department: this.currentFilters?.department || '',
          billType: this.currentFilters?.billType || 'all',
          overdueDays: this.currentFilters?.overdueDays || '',
          amountRange: this.currentFilters?.amountRange || ''
        };
        
        // 发起API请求
        const result = await getPayableBillList(params);
        
        // 处理响应数据
        if (result && result.data && result.data.list) {
          const formattedData = result.data.list.map(item => ({
            id: item.id,
            title: item.title || `账单${item.id}`,
            date: formatDate(item.date),
            tenant: item.tenant || '未知',
            overdueDays: item.overdueDays || 0,
            amount: item.amount,
            status: item.status || '待付'
          }));
          
          this.billList = [...this.billList, ...formattedData];
          
          // 判断是否还有更多数据
          this.noMore = !result.data.hasMore;
        } else {
          // 处理空数据情况
          if (this.page === 1) {
            this.billList = [];
          }
          this.noMore = true;
        }
      } catch (error) {
        console.error('加载账单列表失败:', error);
        uni.showToast({
          title: '加载失败，请重试',
          icon: 'none'
        });
      } finally {
        this.isLoading = false;
      }
    },
    loadMore() {
      if (this.noMore || this.isLoading) return;
      this.page++;
      this.loadBillList();
    }
  }
}
</script>

<style lang="scss">
.overdue-container {
  min-height: 100vh;
  background-color: #f5f5f5;
}

// 隐藏排序选项
:deep(.filter-bar .sort-item) {
  display: none;
}

.bill-list {
  padding: 20rpx;
  height: calc(100vh - 180rpx);
  box-sizing: border-box;
}

.bill-item {
  background-color: #fff;
  border-radius: 12rpx;
  padding: 20rpx;
  margin-bottom: 20rpx;
}

.bill-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20rpx;
}

.bill-info {
  flex: 1;
  min-width: 0;
  
  .bill-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 16rpx;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  .bill-detail {
    font-size: 26rpx;
    color: #666;
    margin-bottom: 12rpx;
    
    .tenant {
      margin-left: 16rpx;
    }
  }
  
  .bill-status {
    .days-overdue {
      font-size: 24rpx;
      color: #ff4d4f;
      background-color: #fff1f0;
      padding: 4rpx 12rpx;
      border-radius: 4rpx;
    }
  }
}

.bill-amount {
  text-align: right;
  min-width: 180rpx;
  flex-shrink: 0;
  
  .amount {
    font-size: 36rpx;
    font-weight: bold;
    color: #333;
    display: block;
    margin-bottom: 8rpx;
    white-space: nowrap;
  }
  
  .status {
    font-size: 24rpx;
    color: #ff4d4f;
    background-color: #fff1f0;
    padding: 4rpx 12rpx;
    border-radius: 4rpx;
    white-space: nowrap;
  }
}
.loading,
.no-more {
  text-align: center;
  padding: 20rpx;
  color: #999;
  font-size: 24rpx;
}
</style>